<template>
    <!-- 滚动区域开始 -->
    <view class="container">
        <z-paging
            ref="paging"
            :scroll-with-animation="true"
        >
            <uv-index-list
                :index-list="Object.keys(generalFriendList)"
                :activeColor=global.THEME_COLOR
            >
                <template v-slot:header>
                    <view>
                        <!-- 通讯菜单区域开始 -->
                        <view class="menu-wrap">
                            <view class="item" v-for="(item, index) in contactMenus" :key="index" @click="goto(item.url)">
                                <view class="image-box">
                                    <i :class="`iconfont icon-${item.icon}`"></i>
                                    <view class="mark" v-if="index == 0 && commonStore.friendApplyTotal > 0">{{ commonStore.friendApplyTotal }}</view>
                                </view>
                                <text class="title-box">{{ item.title }}</text>
                            </view>
                        </view>
                        <!-- 通讯菜单区域结束 -->

                        <!-- 星标好友区域开始 -->
                        <view class="star-wrap">
                            <view class="title-box">星标朋友</view>
                            <!-- 骨架屏 -->
                            <uv-skeletons :loading="isSkeleton" :skeleton="skeletons"></uv-skeletons>
                            <view class="friend-box">
                                <view v-for="(item, index) in starFriendList" :key="index" @click="goto('/pagesFriend/detail/index?id='+ item.id)">
                                    <TridentFriendItem :friend="item"/>
                                </view>
                            </view>
                        </view>
                        <!-- 星标好友区域结束 -->
                    </view>
                </template>

                <template v-for="(item, index) in generalFriendList">
                    <uv-index-item>
                        <uv-index-anchor
                            :text="index"
                            bgColor="#e2f8f3"
                            customNavHeight="50"
                        />
                        <view class="general-wrap">
                            <view
                                v-for="(friend, index) in item"
                                :key="index"
                                @click="goto('/pagesFriend/detail/index?id='+ friend.id)"
                            >
                                <TridentFriendItem :friend="friend"/>
                            </view>
                        </view>
                    </uv-index-item>
                </template>
            </uv-index-list>
        </z-paging>
    </view>
    <!-- 滚动区域结束 -->
</template>

<script setup lang="ts">
import { useCommonStore, useUserStore } from '@/stores'
import { inject, reactive, ref } from 'vue'
import { goto } from '@/utils/tools'
import type { Friend, FriendListParams } from '@/types/friend'
import { reqFriendListAPI } from '@/apis/friend'
import { onShow } from '@dcloudio/uni-app'
import { pinyin } from 'pinyin-pro'

// --------------- 定义全局变量开始 ---------------
// 全局属性
const global: any = inject('global')

const paging = ref()

// 用户存储
const userStore = useUserStore()

// 通讯菜单
const contactMenus = reactive([
    {
        title: '新的好友',
        icon: 'xinpengyou',
        url: '/pagesFriend/new_friend/index'
    },
    {
        title: '仅聊天好友',
        icon: 'a-zu17795',
        url: '/pagesFriend/only_chat/index'
    },
    {
        title: '群聊',
        icon: 'qunliao',
        url: '/pagesGroup/index/index'
    },
    {
        title: '标签',
        icon: 'biaoqian',
        url: '/pagesFriend/label/index'
    },
    {
        title: '通知',
        icon: 'tongzhi',
        url: '/pagesFriend/notify/index'
    },
    {
        title: '黑名单',
        icon: 'heimingdan',
        url: '/pagesFriend/blacklist/index'
    }
])

// 公共存储
const commonStore = useCommonStore()
// --------------- 定义全局变量结束 ---------------


onShow(async () => {

    for (let index = 0; index < 10; index++) {
        skeletons.push(skeleton as never)
    }

    isSkeleton.value = true
    await getFriendList()

    paging.value.scrollToTop()

    isSkeleton.value = false
})


// --------------- 处理好友列表开始 ---------------
const params = ref<FriendListParams>({
    is_my_friend: 1,
    is_friend_info: 1,
    status: '1',
    page: 1,
    page_size: -1
})

// 星标好友列表
const starFriendList = ref<Friend[]>([])

// 普通好友列表
const generalFriendList: any = ref({})

// 获取好友列表
const getFriendList = async () => {
    isSkeleton.value = true
    starFriendList.value = []
    const result = await reqFriendListAPI(params.value)
    let tempFriendList: any = {}
    result.data.friends.forEach(item => {
        let is_asterisk = ''
        item.information.forEach(value => {
            if (value.uid != userStore.profile.user?.uid) {
                is_asterisk = value.is_asterisk
            }
        })

        if (is_asterisk == '1') {
            starFriendList.value.push(item)
        } else  {
            let initial = pinyin(item.info.username, {pattern: 'first', toneType: 'none' }).substr(0, 1).toLocaleUpperCase()
            
            if (!tempFriendList[initial]) {
                tempFriendList[initial] = []
            }

            tempFriendList[initial].push(item)
        }
    })

    generalFriendList.value = Object.keys(tempFriendList).sort().reduce((acc: any, key) => {
        acc[key] = tempFriendList[key];
        return acc;
    }, {});

    // let tempGeneralFriends: any = Object.keys(tempFriendList).sort()
    // tempGeneralFriends.forEach((key: any) => {
    //     let temp: any = {}
    //     tempGeneralFriends[key as never].forEach((item: Friend) => {
    //         temp.
    //     })
    // })


    isSkeleton.value = false
}
// --------------- 处理好友列表结束 ---------------



// --------------- 定义骨架变量开始 ---------------
// 定义是否显示骨架
const isSkeleton = ref(false)

// 定义骨架参数
const skeleton = reactive({
  type: 'flex',
  num: 1,
  style: 'padding: 15rpx 30rpx 15rpx 25rpx;background-color: #fff;border-bottom: 2rpx solid #f6f6f6;align-items: center;',
  children: [
    // 图片区域
    {
      type: 'custom',
      num: 1,
      style: 'width: 90rpx;height: 90rpx;border-radius: 10rpx;margin-right: 40rpx;'
    },

    {
      type: 'custom',
      num: 1,
      style: ['width: 180rpx;height: 40rpx;']
    }
  ]
})

const skeletons = reactive([])
// --------------- 定义骨架变量结束 ---------------
</script>

<style scoped lang="scss">
.container {
    // height: 100vh;
    // 通讯菜单区域开始
    .menu-wrap {
        padding: 0 30rpx;
        background-color: #fff;
        .item {
            display: flex;
            align-items: center;
            // 群聊
            &:nth-child(3) .image-box {
                background-color: #07C160;
                .iconfont {
                    font-size: 35px;
                }
            }

            // 标签
            &:nth-child(4) .image-box {
                background-color: #2781D7;
                .iconfont {
                    font-size: 28px;
                }
            }

            // 通知
            &:nth-child(5) .image-box {
                background-color: #56ACF4;
                .iconfont {
                    font-size: 28px;
                }
            }

            // 黑名单
            &:nth-child(6) .image-box {
                background-color: #c7c6c6;
                .iconfont {
                    font-size: 28px;
                }
            }
            .image-box {
                background-color: #FA9D3D;
                width: 90rpx;
                height: 90rpx;
                line-height: 90rpx;
                border-radius: 10rpx;
                text-align: center;
                position: relative;
                .iconfont {
                    font-size: 50rpx;
                    color: #fff;
                }
                .mark {
                    background-color: red;
                    position: absolute;
                    width: 32rpx;
                    height: 32rpx;
                    line-height: 32rpx;
                    border-radius: 16rpx;
                    top: 0;
                    right: 0;
                    color: #fff;
                    text-align: center;
                    font-size: 20rpx;
                }
            }
            .title-box {
                flex: 1;
                margin-left: 30rpx;
                color: #000;
                font-size: 32rpx;
                border-bottom: 2rpx solid #EDEDED;
                padding: 50rpx 0;
            }
        }
    }
    // 通讯菜单区域结束

    // 星标好友区域开始
    .star-wrap {
        .title-box {
            padding-left: 30rpx;
            background-color: #e1e1e2;
            height: 70rpx;
            line-height: 70rpx;
        }

        .friend-box {
            padding-left: 30rpx;
            background-color: #fff;
        }
    }
    // 星标好友区域结束

    // 普通好友区域开始
    .general-wrap {
        background-color: #fff;
        padding: 0 30rpx;
    }
    // 普通好友区域结束
}
</style>